<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>Notification 通知提醒框</title>
	<link rel="stylesheet" href="../static/css/reset.css">
	<script src="../static/js/vue.global.prod.js"></script>
	<script src="../static/js/antd.min.js"></script>
	<script src="../static/js/icons_antd.js"></script>
</head>
<style>
.ant-btn{
	margin-left: 20px;
}
.button-icon2{
	display: inline-flex;
	align-items: center;
}
.button-icon2 > svg{
	width: 16px;
	margin-right: 4px;
}
</style>
<body>

<div id="app">
	<a-divider class="a-divi" orientation="left">Hooks 调用（推荐）（不好实现）</a-divider><!-- =============================================================== -->
	<p class="desc">通过 notification.useNotification 创建支持读取 context 的 contextHolder。</p>
	<p class="desc">请注意，我们推荐通过顶层注册的方式代替 notification 静态方法，因为静态方法无法消费上下文，因而 ConfigProvider 的数据也不会生效。</p>
	
	<a-divider class="a-divi" orientation="left">自动关闭的延时</a-divider><!-- =============================================================== -->
	<p class="desc">自定义通知框自动关闭的延时，默认 4.5s，取消自动关闭只要将该值设为 0 即可。</p>
	<a-button type="primary" @click="openNotification1">Open the notification box</a-button>
	
	<a-divider class="a-divi" orientation="left">自定义图标</a-divider><!-- =============================================================== -->
	<p class="desc">图标可以被自定义。</p>
	<a-button type="primary" @click="openNotification2">Open the notification box</a-button>
	
	<a-divider class="a-divi" orientation="left">自定义样式</a-divider><!-- =============================================================== -->
	<p class="desc">使用 style 和 class 来定义样式。</p>
	<a-button type="primary" @click="openNotification3">Open the notification box</a-button>
	
	<a-divider class="a-divi" orientation="left">更新消息内容</a-divider><!-- =============================================================== -->
	<p class="desc">可以通过唯一的 key 来更新内容, 或者通过响应式数据更新。</p>
	<a-button type="primary" @click="openNotification4">Open the notification box (update by key)</a-button>
	<a-button type="primary" @click="openNotification5">Open the notification box (update by reactive)</a-button>
	
	<a-divider class="a-divi" orientation="left">基本用法</a-divider><!-- =============================================================== -->
	<p class="desc">最简单的用法，4.5 秒后自动关闭。</p>
	<a-button type="primary" @click="openNotification6">Open the notification box</a-button>
	
	<a-divider class="a-divi" orientation="left">带有图标的通知提醒框</a-divider><!-- =============================================================== -->
	<p class="desc">通知提醒框左侧有图标。</p>
	<a-button @click="() => openNotificationWithIcon('success')">Success</a-button>
	<a-button @click="() => openNotificationWithIcon('info')">Info</a-button>
	<a-button @click="() => openNotificationWithIcon('warning')">Warning</a-button>
	<a-button @click="() => openNotificationWithIcon('error')">Error</a-button>
	
	<a-divider class="a-divi" orientation="left">自定义按钮</a-divider><!-- =============================================================== -->
	<p class="desc">自定义关闭按钮的样式和文字。</p>
	<a-button type="primary" @click="openNotification8">Open the notification box</a-button>
	
	<a-divider class="a-divi" orientation="left">位置</a-divider><!-- =============================================================== -->
	<p class="desc">使用 placement 可以配置通知从右上角、右下角、左下角、左上角弹出。</p>
	<a-button type="primary" @click="openNotification9('top')" class="button-icon2" :icon="Vue.h(AntdIconsVue.BorderTopOutlined)">top</a-button>
	<a-button type="primary" @click="openNotification9('bottom')" class="button-icon2" :icon="Vue.h(AntdIconsVue.BorderBottomOutlined)">bottom</a-button>
	<a-button type="primary" @click="openNotification9('topLeft')" class="button-icon2">
		<template #icon><radius-upleft-outlined></radius-upleft-outlined></template>
		topLeft
	</a-button>
	<a-button type="primary" @click="openNotification9('topRight')" class="button-icon2">
		<template #icon><radius-upright-outlined></radius-upright-outlined></template>
		topRight
	</a-button>
	<!-- <a-divider></a-divider> -->
	<hr style="border: none; border-top: 1px solid #eee;"/>
	<a-button type="primary" @click="openNotification9('bottomLeft')" class="button-icon2">
		<template #icon><radius-bottomleft-outlined></radius-bottomleft-outlined></template>
		bottomLeft
	</a-button>
	<a-button type="primary" @click="openNotification9('bottomRight')" class="button-icon2">
		<template #icon><radius-bottomright-outlined></radius-bottomright-outlined></template>
		bottomRight
	</a-button>
	
	
	
	
	
	
	
	
	
	
</div>
<div class="h100"></div>

</body>
<script>
const notification = antd.notification;
// console.log(notification);
const Main = {
data() {
	return {
		Vue, AntdIconsVue,
		msg5: '更新请求中',
		des5: '正在发起数据更新请求...',
		
	}
},
mounted: function(){
	// console.log("实例挂载完成后被调用");
	// console.log(antd.message);
	// notification的全局方法（感觉这个还是有点用的）
	notification.config({
		// placement: 'bottomRight',
		// bottom: '50px',		//消息从底部弹出时，距离底部的位置，单位像素。
		// duration: 1,
		// rtl: true,		//是否开启 RTL 模式
	});
	
	this.$nextTick(function () {
		// console.log("仅在整个视图都被渲染之后才会运行的代码");
		
	});
	// console.log("实例挂载完成后被调用2");
},
methods:{
	openNotification1(){
		notification.open({
			message: 'Notification Title',
			description: 'I will never close automatically. I will be close automatically. I will never close automatically.',
			// duration: 0,
		});
	},
	openNotification2(){
		notification.open({
			message: 'Notification Title',
			description: 'This is the content of the notification. This is the content of the notification. This is the content of the notification.',
			// icon: () => h(SmileOutlined, { style: 'color: #108ee9' }),
			icon: Vue.h(AntdIconsVue.SmileOutlined, {class: "aut-icon", style: 'color: #108ee9'}),
			duration: 0,
		});
	},
	openNotification3(){
		notification.open({
			message: 'Notification Title',
			description: 'This is the content of the notification. This is the content of the notification. This is the content of the notification.',
			style: {
				width: '600px',
				marginLeft: `${335 - 600}px`,
			},
			class: 'diy-class44444',
			duration: 0,
		});
	},
	openNotification4(){
		notification.open({
			key: 'updatable',
			message: 'Notification Title',
			description: 'description.',
			duration: 0,
		});
		setTimeout(() => {
			notification.open({
				key: 'updatable',
				message: 'New Title',
				description: 'New description.',
			});
		}, 1000);
	},
	openNotification5(){
		notification.open({
			message: () => this.msg5,
			description: () => this.des5,
			// duration: 0,
		});
		setTimeout(()=>{
			console.log(this.msg5);
			this.msg5 = '更新成功';
			this.des5 = '数据已经更新成功了！';
		}, 1000)
	},
	openNotification6(){
		notification.open({
			message: 'Notification Title',
			description: 'I will never close automatically. I will be close automatically. I will never close automatically.',
			onClick: () => {
				console.log('Notification Clicked!');
			},
			// duration: 0,
		});
	},
	openNotificationWithIcon(type){
		notification[type]({
			message: 'Notification Title',
			description: 'This is the content of the notification. This is the content of the notification. This is the content of the notification.',
			// duration: 0,
		});
	},
	
	close(){
		console.log('通知已关闭。关闭按钮已被单击或持续时间已过。99');
	},
	openNotification8(){
		const key = `open${Date.now()}`;
		notification.open({
			key,
			message: 'Notification Title',
			description: '通知关闭后将调用一个函数（在手动的“持续时间”后自动调用）。',
			btn: () =>
			Vue.h(antd.Button,
				{
					type: 'primary',
					size: 'small',
					onClick: () => notification.close(key),
				},
				{ default: () => '知道了' },
			),
			onClose: this.close(),
		});
	},
	
	openNotification9(placement){
		notification.open({
			message: `Notification ${placement}`,
			description: 'This is the content of the notification. This is the content of the notification. This is the content of the notification.',
			placement,
		});
	},
	
	
	
},
}

const app = Vue.createApp(Main);
for (const [key, component] of Object.entries(AntdIconsVue)) {app.component(key, component)};
app.use(antd);
let vm = app.mount("#app");


</script>
</html>
